<template>
  <n-layout class="out">
    <n-grid :cols="4" :x-gap="16">
      <n-gi :span="3">
        <n-card title="作业现场全景" :bordered="false">
          <div class="h-96 bg-gray-100 rounded flex-center">
            <img src="../../assets/飞机.jpg" alt="" style="height:250px">
          </div>
          <n-tabs class="mt-4">
            <n-tab-pane name="details" tab="任务详情">
              <n-grid :cols="3" :bordered="false">
                <n-gi>
                  <n-statistic label="作业面积" value="2.8km²" />
                </n-gi>
                <n-gi>
                  <n-statistic label="已完成进度" value="78%">
                    <n-progress type="line" :percentage="78" />
                  </n-statistic>
                </n-gi>
                <n-gi>
                  <n-statistic label="剩余电量" value="32%">
                    <n-progress type="line" :percentage="32" status="error" />
                  </n-statistic>
                </n-gi>
              </n-grid>
            </n-tab-pane>
            <n-tab-pane name="history" tab="历史记录">
              <n-data-table
                :columns="historyColumns"
                :data="historyData"
              />
            </n-tab-pane>
          </n-tabs>
        </n-card>
      </n-gi>

      <!-- 侧边控制面板 -->
      <n-gi>
        <n-card title="快速操作" class="mb-4" :bordered="false">
          <n-space vertical>
            <n-button type="warning" @click="pauseTask">暂停任务</n-button>
            <n-button type="error" @click="emergencyStop">紧急停止</n-button>
          </n-space>
        </n-card>
        <n-card title="传感器数据" :bordered="false">
          <n-list :show-divider="false">
            <n-list-item>
              <n-statistic label="风速" value="5.2m/s" />
            </n-list-item>
            <n-list-item>
              <n-statistic label="温度" value="28℃" />
            </n-list-item>
            <n-list-item>
              <n-statistic label="海拔" value="156m" />
            </n-list-item>
          </n-list>
        </n-card>
      </n-gi>
    </n-grid>
  </n-layout>
</template>

<script setup>
import { ref } from 'vue'
import {
  NLayout,
  NGrid,
  NGi,
  NCard,
  NStatistic,
  NProgress,
  NButton,
  NSpace,
  NDataTable,
  NList,
  NListItem,
  NTabs,
  NTabPane
} from 'naive-ui'


// 历史记录表格配置
const historyColumns = [
  { title: '时间', key: 'time' },
  { title: '操作类型', key: 'type' },
  { title: '参数', key: 'params' }
]

const historyData = ref([
  { time: '10:23', type: '高度调整', params: '120m → 100m' },
  { time: '10:15', type: '路径更新', params: '新增3个航点' },
  { time: '09:58', type: '相机操作', params: '切换至广角镜头' }
])


const pauseTask = () => console.log('暂停任务')
const emergencyStop = () => console.log('紧急停止')
</script>
<style>
.out {
 height: 100%; 
}
</style>